<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./book.js"></script>
    <link rel="stylesheet" href="./foot.css">
    <style>
        body {
            background-color: rgb(244, 245, 247);
        }

        .top {
            position: relative;
        }

        .top img {
            width: 100%;
            height: 100%;
        }

        .top ul {
            margin: 0 auto;
            padding: 0px;
            list-style: none;
            display: flex;
            align-items: center;
            position: absolute;
            left: 50%;
            bottom: 5px;
            transform: translate(-50%, -50%);
        }

        .top ul li {
            width: 8px;
            height: 8px;
            margin: 4px;
            border-radius: 50%;
            background: #fff;
            opacity: 0.4;
            cursor: pointer;
        }

        .top ul li.active {
            width: 12px;
            height: 12px;
            opacity: 1;
        }

        .classify {
            margin-top: -20px;
            background-color: #fff;
            width: 100%;
            height: 150px;
        }

        .classify ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            flex-shrink: 1;
            margin-left: -25px;
        }

        .classify ul li img {
            width: 65px;
            height: 68px;
        }

        .HOTbook {
            margin-top: 10px;
            background-color: #fff;
            height: 50px;
            display: flex;
        }

        .HOTbook img {
            height: 30px;
            margin: 10px 10px 0;
        }

        .HOTbook div {
            font-weight: bold;
            font-size: 28px;
            line-height: 50px;
            color: rgb(218, 30, 0);
        }

        .Allbook {
            margin-top: 10px;
            height: 1150px;
            display: flex;
        }

        .Allbook ul {
            height: 1300px;
            list-style: none;
            margin: 0 0 0 -40px;
        }

        .Allbook ul li {
            /* width: 330px; */
            height: 150px;
            display: flex;
            margin-bottom: 10px;
            background-color: #fff;
        }

        .bookImg img {
            width: 130px;
            height: 130px;
            /* margin-left: -40px; */
        }

        .fonts h4 {
            margin: 0 0 10px;
        }

        .fonts p {
            margin: 0;
            color: rgb(180, 166, 150);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }

        .fonts div {
            margin-top: 16px;
        }

        .fonts div span {
            font-size: 20px;
            color: red;
            font-weight: bold;
        }

        .fonts div del {
            font-size: 14px;
            margin-left: 8px;
            color: rgb(110, 108, 103);
        }

        a {
            text-decoration: none;
            color: #000;
        }
    </style>
</head>

<body>
    <div class="top">
        <img src="http://img63.ddimg.cn/2021/6/30/2021063015233889295.jpg" , alt="">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="classify">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="HOTbook">
        <img src="../移动书城页面/img/hot.png" alt="">
        <div>热销图书</div>

    </div>
    <div class="Allbook">
        <ul>
            <li>
                <!-- <div class="bookImg">
                    <img src="http://img3m2.ddimg.cn/1/6/29239552-1_w_18.jpg" alt="">
                </div>
                <div class="fonts">
                    <h4>字母表谜暗</h4>
                    <p>当你隐隐觉得不对劲，致命的恶意正悄悄逼近！当你隐隐觉得不对劲，致命的恶意正悄悄逼近！当你隐隐觉得不对劲，致命的恶意正悄悄逼近！</p>
                    <div><span>￥32</span><del>￥42</del></div>
                </div> -->
            </li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <footer>
        <div class="foot_box1">
            <img src="./img/icon_book_selected.png" alt=""><a>首页</a>
        </div>
        <div class="foot_box4">
            <img src="./img/icon_sort_noselected.png" alt=""><a href="./classification.html">分类</a>
        </div>
        <div class="foot_box2">
            <img src="./img/icon_car_noselected.png" alt=""><a href="./Shopping.html">购物车</a>
        </div>
        <div class="foot_box3">
            <img src="./img/icon_mine_noselected.png" alt=""><a href="./me.html">我的</a>
        </div>
    </footer>

</body>
<script>
    const changeTop = document.querySelectorAll('.top ul li')
    const TopImg = document.querySelector('.top img')
    let i = 0
    setInterval(function () {
        i++
        if (i >= swiperImgs.length) {
            i = 0
        }
        TopImg.src = swiperImgs[i]
        document.querySelector('.top ul li.active').classList.remove('active')
        document.querySelector(`.top ul li:nth-child(${i + 1})`).classList.add('active')
    }, 2000)
    const changeclassify = document.querySelectorAll('.classify ul li')
    for (let i = 0; i < list.length; i++) {
        changeclassify[i].innerHTML = `<img src="${list[i]}" alt="">`
    }
    const book = document.querySelectorAll('.Allbook ul li')
    const [{ id, bookName, originalPrice, presentPrice, content, thumbSrc }] = books
    for (let index = 0; index < books.length; index++) {
        book[index].innerHTML = `
        <div class="bookImg">
            <img src=${books[index].thumbSrc} alt="">
        </div>
        <div class="fonts">
            <h4>${books[index].bookName}</h4>
            <p>${books[index].content}</p>
            <div><span>￥${books[index].presentPrice}</span><del>￥${books[index].originalPrice}</del></div>
        </div>
        `
    }
    for (let i = 0; i < books.length; i++) {
        book[i].addEventListener('click', function (e) {
            if (e.target.tagName === 'IMG') {
                console.log(books[i].id);
                location.href = './information.html?id=' + books[i].id
            }
        })

    }
</script>

</html>